<template>
  <div>
    <hot-table width="100%" height="500" :settings="settings" ref="hotTableComponent"></hot-table>
    <button @click="changeSeat">排座</button>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, ref, reactive, toRefs } from 'vue';
import { HotTable } from '@handsontable/vue3';
import 'handsontable/dist/handsontable.full.css'; // 表格样式
import { registerAllModules } from 'handsontable/registry'; // 注册所有模块
import 'handsontable/languages/zh-CN'; // 汉语包
registerAllModules();

// 导入和注册插件和单元格类型
// import { registerCellType, NumericCellType } from 'handsontable/cellTypes';
// import { registerPlugin, UndoRedo } from 'handsontable/plugins';
// registerCellType(NumericCellType);
// registerPlugin(UndoRedo);

// export default defineComponent({
//   components: { HotTable },

  // setup() {
    const hotTableComponent = ref(null);
    let hotInstance = null;

    const settings = ref({
      language: 'zh-CN', // 官方汉化
      licenseKey: 'non-commercial-and-evaluation', // 去除底部非商用声明

      colHeaders: ["病人姓名", "病人身份证号", "病人类型1", "病人类型2", "病人类型3", "病人类型4","病人类型5", "病人类型6", "病人类型7","病人类型8","病人类型9","病人类型10","病人类型11","病人类型12","病人类型13","病人类型14","病人类型15"],

      columns: [
        { data: "病人姓名", type: "text" },
        { data: "病人身份证号", type: "text" },
        { data: "病人类型1", type: "text" },
        { data: "病人类型2", type: "text" },
        { data: "病人类型3", type: "text" },
        { data: "病人类型4", type: "text" },
        { data: "病人类型5", type: "text" },
        { data: "病人类型6", type: "text" },
        { data: "病人类型7", type: "text" },
        { data: "病人类型8", type: "text" },
        { data: "病人类型9", type: "text" },
        { data: "病人类型10", type: "text" },
        { data: "病人类型11", type: "text" },
        { data: "病人类型12", type: "text" },
        { data: "病人类型13", type: "text" },
        { data: "病人类型14", type: "text" },
        { data: "病人类型15", type: "text" }
      ],
      data: [],
      // data: [
      //   { "病人姓名": "测试", "病人身份证号": "123456789", "病人类型1": "贫困户11", "病人类型2": "贫困户12", "病人类型3": "贫困户13", "病人类型4": "贫困户14" },
      //   { "病人姓名": "张三", "病人身份证号": "369258147", "病人类型1": "贫困户21", "病人类型2": "贫困户22", "病人类型3": "贫困户23", "病人类型4": "贫困户24" }
      // ],

      currentRowClassName: 'currentRow', // 突出显示行
      currentColClassName: 'currentCol', // 突出显示列
      minSpareRows: 10, // 行留白
      autoWrapRow: false, // 自动换行
      minRows: 2100,
      trimWhitespace: false, // 去除空格
      rowHeaderWidth: 100, // 单元格宽度
      stretchH: 'all',
      renderAllRows: false,
      rowHeaders: true, // 行标题
      formulas: false, // 公式
      copyable: true, // 允许键盘复制
      wordWrap: false, // 自动换行
      copyPaste: true, // 复制粘贴
      filters: false, // 允许通过内置组件或 API 过滤表数据
      search: false,
      fixedColumnsLeft: 0, // 固定左边列数
      fixedRowsTop: 0, // 固定上边列数
      columnSorting: true, // 排序
      contextMenu: true, // 右键菜单
    });
    const getRow = ref([
      { "病人姓名": "测试", "病人身份证号": "123456789", "病人类型1": "贫困户11", "病人类型2": "贫困户12", "病人类型3": "贫困户13", "病人类型4": "贫困户14" },
      { "病人姓名": "张三", "病人身份证号": "369258147", "病人类型1": "贫困户21", "病人类型2": "贫困户22", "病人类型3": "贫困户23", "病人类型4": "贫困户24" }
    ])
    // 在组件挂载后获取 handsontable 实例
    onMounted(() => {
      if (hotTableComponent.value) {
        hotInstance = hotTableComponent.value.hotInstance;
        console.log('Handsontable instance:', hotInstance);
        
        // 现在你可以安全地调用 hotInstance 的方法了
        // 例如获取源数据或数据
        console.log('Source Data:', hotInstance.getSourceData());
        console.log('Data:', hotInstance.getData());
      }
    });

    const changeSeat = () => {
      settings.value.data = getRow.value
      //data.value=apiData.list
      hotTableComponent.value.hotInstance.loadData(getRow.value)
      console.log(settings.value.data, "settings.value.data ");
    }

    // return {
    //   ...toRefs(state),
    //   hotTableComponent,
    // };
//   },
// });
</script>

<style scoped>
/* 根据需要添加自定义样式 */
</style>
